<template>
  <el-tabs v-model="activeName2" type="border-card" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
      <statusCom></statusCom>
      <tableCom :tabName="tabName" ></tableCom>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">
      <statusCom></statusCom>
      <tableCom :tabName="tabName"></tableCom>
    </el-tab-pane>
    <el-tab-pane label="角色管理" name="third">
      <statusCom></statusCom>
      <tableCom :tabName="tabName"></tableCom>
    </el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">
      <statusCom></statusCom>
      <tableCom :tabName="tabName"></tableCom>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import StatusCom from './components/StatusCom.vue';
import TableCom from './components/TableCom.vue';

export default {
  data() {
      return {
        activeName2: 'first',
        tabName: "first",
        items:[

        ]
      };
  },
  components:{
      StatusCom,
      TableCom,
  },
  methods: {
     handleClick(tab, event) {
        console.log(tab, event);
        console.log(tab.label);
        console.log(tab.name);
        console.log("aaaa===",this.activeName2);
        // this.$set(this.tabName,tab.name);
         this.tabName=tab.name;
    },
    addCom(){
      this.items.push({

      })
    }
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>
